import Taro, { Component } from '@tarojs/taro'
import {View, Picker, Text} from '@tarojs/components'
import { AtList, AtListItem, AtTextarea, AtButton } from 'taro-ui'

import './index.scss'

export default class attendance extends Component {

  config = {
    navigationBarTitleText: '补卡申请'
  };

  constructor (props) {
    super(props);
    this.state = {
      reason: '',
      time: ''
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleChange (reason) {
    this.setState({reason});
    return reason;
  }

  onTimeChange = e => {
    this.setState({
      time: e.detail.value
    })
  };

  onSubmit() {
    console.log(this.state)
  }

  onReset (event) {
    this.setState({
      reason: '',
      time: ''
    })
  }

  render () {
    return (
      <View className='main-m-t'>
        <View className='main-bg fromItem'>
          <View className='label-margin fontSize'>补卡时间</View>
          <View>
            <Picker mode='time' onChange={this.onTimeChange} value={this.state.time}>
              <AtList>
                <AtListItem title='请选择时间' extraText={this.state.time} />
              </AtList>
            </Picker>
          </View>
        </View>

        <View className='main-bg fromItem'>
          <View className='label-margin fontSize'>补卡原因</View>
          <AtTextarea
            value={this.state.reason}
            onChange={this.handleChange.bind(this)}
            maxLength={200}
            placeholder='请输入原因'
          />
        </View>

        <View className='btn-view'>
          <AtButton type='secondary' onClick={this.onReset.bind(this)}>重置</AtButton>
          <AtButton type='primary' onClick={this.onSubmit.bind(this)}>提交</AtButton>
        </View>

      </View>
    )
  }
}
